<template>
  <div>
    <p class="titleFont">
      <slot name="title"></slot>
    </p>
    <div class="grid">
      <div
        v-for="data in props.gridListInfo"
        :key="data.id"
        @click="gotoMusicList(data.id!,data.name)"
      >
        <!-- 播放次数 -->
        <div class="manyNum" v-if="route.path != '/artistList'">
          <svg class="icon" aria-hidden="true" v-if="route.path.match(/mv/g)?.length">
            <use xlink:href="#icon-MV"></use>
          </svg>
          <svg class="icon" aria-hidden="true" v-else>
            <use xlink:href="#icon-erji"></use>
          </svg>
          {{ data.playCount }}
        </div>
        <!-- 图和 播放按钮-->
        <div class="img">
          <p class="theme" v-if="route.path == '/artistList'">查看详情</p>
          <img :src="data.coverImgUrl || data.picUrl || data.cover" alt="" />
          <svg
            class="icon"
            aria-hidden="true"
            v-if="route.path != '/artistList'"
            :style="route.path.match(/mv/g)?.length ? play() : ''"
          >
            <use xlink:href="#icon-bofang"></use>
          </svg>
        </div>
        <div class="p">
          <p>{{ data.name }}</p>
          <p v-if="data.artistName">{{ data.artistName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useThemeColor } from "@/store/themeColor";
const themeColor = useThemeColor();
const route = useRoute();
const router = useRouter();
type typeGridList = Partial<homeGridList & musicList & Mv & artistsTYPE>;
const props = withDefaults(
  defineProps<{
    gridListInfo: typeGridList[];
    width?: string;
    height?: string;
    borderRadius?: string;
  }>(),
  {
    gridListInfo: () => [],
    width: "19%",
    height: "19%",
    borderRadius: "string",
  }
);
const play = () => "top: 50%;left: 50%;transform: translate(-50%, -50%);";
const gotoMusicList = (id: number | string, name?: string) => {
  if (route.path != "/mv") {
    router.push({ path: "/MusicListDetail", query: { id: id } });
  } else router.push({ path: "/mv-detail", query: { id: id, name } });
};
</script>

<style scoped lang="less">
.grid {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  div {
    margin-right: auto;
    width: v-bind("props.width");
    height: v-bind("props.height");
    position: relative;
    overflow: hidden;
    transition: all 0.6s;
    box-sizing: border-box;
    border-radius: v-bind("props.borderRadius");
    margin-bottom: 10px;

    &:hover > .img > .theme {
      z-index: 11;
      transition: all 0.6s;
      opacity: 1;
    }
    &:hover .manyNum {
      top: 0;
      transition: all 0.6s;
    }
    &:hover .img > .icon {
      opacity: 1;
    }
    > .manyNum {
      z-index: 111;
      position: absolute;
      background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
      transition: all 0.6s;
      text-align: right;
      height: fit-content;
      width: 100%;
      color: #fff;
      right: 0;
      box-sizing: border-box;
      padding-right: 10px;
      height: 30px;
      top: -30px;
      > .icon {
        font-size: 25px;
      }
    }
    > .img {
      .theme {
        transition: all 0.6s;
        opacity: 0;
        padding: 0 10px;
        border-radius: 5px;
        color: v-bind("themeColor.themeFontColor");
        position: absolute;
        top: 50%;
        left: 50%;
        height: 23px;
        line-height: 23px;
        width: fit-content;
        border: 1px solid v-bind("themeColor.themeFontColor");
        transform: translate(-50%, -50%);
      }
      transition: all 0.6s;
      width: 100%;
      height: 100%;
      > img {
        width: 100%;
        height: 100%;
      }
      > .icon {
        transition: all 0.6s;
        position: absolute;
        top: 83%;
        left: 5px;
        font-size: 42px;
        opacity: 0;
      }
    }
    > .p {
      width: 100%;
      display: flex;
      justify-content: space-between;
      P {
        height: fit-content;
        width: 100%;
        margin-left: 5px;
      }
    }
  }
}
</style>
